<template>
  <div>
    <div class="main">
      <div id="orderStatistics">
        <p style="margin:0 0 5px 10px">
          <span style="font-size: 15px;font-weight: bold">订单统计</span>
          <el-link type="primary" style="float: right;margin-right: 20px;clear: both">查看详细数据</el-link>
        </p>
        <div class="info" style="margin-left: 20px">
          <div class="margin">
            <span class="orderData">{{ todayOrderManySum }}</span>
            <span class="up"><i class="el-icon-caret-top" />{{ todayOrderManySum }}</span>
            <span class="orderTitle">今日订单数</span>
          </div>
        </div>
        <div class="info">
          <div class="margin">
            <span class="orderData">{{ todayOrderMoneySum }}</span>
            <span class="up"><i class="el-icon-caret-top" />{{ todayOrderMoneySum }}</span>
            <span class="orderTitle">今日订单金额</span>
          </div>
        </div>
        <div class="info">
          <div class="margin">
            <span class="orderData">{{ monthOrderMoneySum }}</span>
            <span class="up"><i class="el-icon-caret-top" />{{ todayOrderMoneySum }}</span>
            <span class="orderTitle">本月订单金额</span>
          </div>
        </div>
        <div class="info">
          <div class="margin">
            <span class="orderData">{{ totalOrderMoneySum }}</span>
            <span class="up"><i class="el-icon-caret-top" />{{ todayOrderMoneySum }}</span>
            <span class="orderTitle">总订单金额</span>
          </div>
        </div>
      </div>
      <el-tabs type="card" @tab-click="elTabPaneSkip">
        <el-tab-pane label="公海订单">
          <div class="divMarBot">
            <ul class="orderState" style="list-style: none;display:inline-block;padding-left:10px;">
              <li v-for="item in elLinkList">
                <el-link :underline="false" :type="item.isClick?'primary':'default'" @click="orderStatusQuery(item)">
                  {{ item.label + '(' + item.value + ')' }}
                </el-link>
              </li>
            </ul>
            <el-input
              style="width: 150px;margin-right: 10px;margin-left: 220px"
              size="small"
              placeholder="搜索..."
              prefix-icon="el-icon-search"
              @blur="queryOrderInformation(1)"
              v-model="searchObj.orderTitle"
            >
            </el-input>
            <el-select
              style="width: 160px;margin-right: 15px"
              size="small"
              clearable
              @change="queryOrderInformation(1)"
              v-model="searchObj.orgId"
              filterable
              placeholder="所属公司"
            >
              <el-option label="全部" :value="null" />
              <el-option
                v-for="item in companyInfoList"
                :label="item.name"
                :value="item.id"
                :key="item.id" />
            </el-select>
            <el-select
              style="width: 140px;margin-right: 15px;color: gray"
              size="small"
              @change="queryOrderInformation(1)"
              clearable
              v-model="searchObj.orderDate"
              placeholder="下单时间范围"
            >
              <el-option label="全部" :value="null" />
              <el-option
                v-for="item in selectTimer"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-button size="mini" style="font-size: 14px;" class="iconfont iconios-switch"
                       @click="openSearchDialog"
            > 高级筛选
            </el-button>
            <el-button size="mini" style="width: 80px" type="primary" @click="skipHandleOrderByInsert">
              创建订单&nbsp;
            </el-button>
          </div>
          <el-table :data="orderList" style="width: 99%"
                    v-loading="orderTableLoading"
                    :cell-style="{fontSize:'12px',textAlign:'center'}"
                    :header-cell-style="{textAlign:'center'}">
            <el-table-column prop="image" label="封面图" width="120">
              <template v-slot="scope">
                <img :alt="scope.row.orderTitle" loading="lazy" :src="scope.row.image"
                     style="width: 100px;height: 60px" />
              </template>
            </el-table-column>
            <el-table-column prop="orderTitle" label="订单标题" width="260">
              <template v-slot="scope">
                <p>
                  <span style="padding-right: 2px">{{ scope.row.orderTitle }}</span>
                  <el-tag type="warning" size="small">{{ scope.row.orderQualityName }}</el-tag>
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="customerName" label="客户名称" width="160">
              <template v-slot="scope">
                <p>
                  <span>{{ scope.row.customerName }}</span>
                  <el-tag type="info" size="mini">V2</el-tag>
                  <el-tag type="info" size="mini">高消费</el-tag>
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="任务数" width="70">
              <template v-slot="scope">
                {{ scope.row.orderDetailList.length }}
              </template>
            </el-table-column>
            <el-table-column prop="customerServiceName" label="客服" width="160">
              <template v-slot="scope">
                {{ scope.row.customerServiceName + " / " + scope.row.orgName }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="订单状态" width="100">
              <template v-slot="scope">
                <el-tag type="primary" size="small" v-if="scope.row.status===1">下单</el-tag>
                <el-tag type="danger" size="small" v-if="scope.row.status===3">死单</el-tag>
                <el-tag type="success" size="small" v-if="scope.row.status===2">已完成</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="订单金额" width="210">
              <template v-slot="scope">
                <p v-if="scope.row.payment===0">
                  <span class="orderMoneyDot" style="background-color:#28BC28BD;" />
                  <span>支付完成 </span>
                  <span class="orderMoneySum">(共{{ scope.row.money + ".00" }})</span>
                </p>
                <p v-else-if="scope.row.payment!==0&&scope.row.paidMoney===0">
                  <span class="orderMoneyDot" style="background-color:gray;" />
                  <span>未支付 </span>
                  <span class="orderMoneySum">(共{{ scope.row.money + ".00" }})</span>
                </p>
                <p v-else>
                  <span class="orderMoneyDot" style="background-color:red;" />
                  <span>待支付{{ scope.row.payment }}元 </span>
                  <span class="orderMoneySum">(共{{ scope.row.money + ".00" }})</span>
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="orderDate" label="对图时间" width="180" />
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false" @click="skipOrderDetail(scope.row.id,scope.row)">详情</el-link>
                &nbsp;&nbsp;&nbsp;
                <el-link type="danger" :underline="false" @click="openDeleteMsgBox(scope.row.id,scope.row.orderTitle)">
                  删除
                </el-link>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin: 15px 0 40px 280px">
            <el-pagination background
                           layout="total,prev, pager, next,jumper"
                           :total="pageUtil.total"
                           :current-page="pageUtil.pageNum"
                           :page-sizes="[1,2,3,4,5]"
                           :page-size="pageUtil.pageSize"
                           @current-change="queryOrderInformation"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的订单">
          <!--          <div class="divMarBot">
                      <ul class="orderState" style="list-style: none;display:inline-block;padding-left:10px">
                        <li v-for="item in elLinkList">
                          <el-link :underline="false" :type="item.isClick?'primary':'default'" @click="orderStatusQuery(item)">
                            {{ item.label + '(' + item.value + ')' }}
                          </el-link>
                        </li>
                      </ul>
                      <el-input
                        style="width: 150px;margin-right: 5px;margin-left: 160px"
                        size="small"
                        placeholder="搜索..."
                        prefix-icon="el-icon-search"
                        clearable
                        v-model="searchObj.orderTitle"
                      >
                      </el-input>
                      <el-select
                        style="width: 160px;margin:0 5px"
                        size="small"
                        clearable
                        v-model="searchObj.orgId"
                        filterable
                        placeholder="所属公司"
                      >
                        <el-option label="全部" :value="null" />
                        <el-option
                          v-for="item in companyInfoList"
                          :label="item.name"
                          :value="item.id"
                          :key="item.id" />
                      </el-select>
                      <el-select
                        style="width: 140px;margin-right: 5px"
                        size="small"
                        clearable
                        v-model="searchObj.orderDate"
                        placeholder="下单时间范围"
                      >
                        <el-option label="全部" :value="null" />
                        <el-option
                          v-for="item in selectTimer"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-button size="mini" style="font-size: 14px;" class="iconfont iconios-switch"
                                 @click="$router.push({name:'orderDetails'})">
                        高级筛选
                      </el-button>
                      <el-button size="mini" type="primary" style="width: 80px" @click="skipCreateOrder">创建订单&nbsp;</el-button>
                    </div>
                    <el-table :data="tempTableList" style="width: 100%">
                      <el-table-column prop="date" label="封面图" width="120" />
                      <el-table-column prop="name" label="订单标题" width="200" />
                      <el-table-column prop="address" label="客户名称" width="160" />
                      <el-table-column prop="address" label="任务数" width="80" />
                      <el-table-column prop="address" label="客服" width="150" />
                      <el-table-column prop="address" label="制作人员" width="160" />
                      <el-table-column prop="address" label="订单状态" width="100" />
                      <el-table-column prop="address" label="订单金额" width="180" />
                      <el-table-column prop="address" label="对图时间" width="180" />
                      <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">

                        </template>
                      </el-table-column>
                    </el-table>
                    <div style="margin: 15px 0 40px 280px">
                      <el-pagination background
                                     layout="total,prev, pager, next,jumper"
                                     :total="pageUtil.total"
                                     :current-page="pageUtil.pageNum"
                                     :page-sizes="[1,2,3,4,5]"
                                     :page-size="pageUtil.pageSize"
                                     @current-change="queryOrderInformation"
                      />
                    </div>-->
        </el-tab-pane>
        <el-tab-pane label="报价表">
          <div class="divMarBot">
            <el-input
              style="width: 150px;margin-right: 20px;margin-left: 10px"
              size="small"
              placeholder="搜索..."
              prefix-icon="el-icon-search"
              v-model="searchObj.orderTitle"
              @blur="queryOrderInformation(1)"
            >
            </el-input>
            <el-select
              style="width: 180px;margin-right: 20px"
              size="small"
              clearable
              @change="queryOrderInformation(1)"
              v-model="searchObj.orgId"
              filterable
              placeholder="所属公司"
            >
              <el-option label="全部" :value="null" />
              <el-option
                v-for="item in companyInfoList"
                :label="item.name"
                :value="item.id"
                :key="item.id" />
            </el-select>
            <el-select
              style="width: 140px;margin-right: 20px"
              size="small"
              clearable
              @change="queryOrderInformation(1)"
              v-model="searchObj.orderDate"
              placeholder="下单时间范围"
            >
              <el-option label="全部" :value="null" />
              <el-option
                v-for="item in selectTimer"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button size="mini" style="font-size: 14px;" class="iconfont iconios-switch" @click="openSearchDialog">
              高级筛选
            </el-button>
            <el-button style="margin-left: 460px" size="mini" type="primary" @click="skipHandleOrderByInsert">
              创建报价表
            </el-button>
          </div>
          <el-table :data="orderList" style="width: 100%;margin-top: 8px"
                    v-loading="quotationTableLoading"
                    :cell-style="{fontSize:'14px',textAlign:'center'}"
                    :header-cell-style="{textAlign:'center'}">
            <el-table-column prop="orderTitle" label="订单标题" width="200" />
            <el-table-column prop="customerName" label="客户名称" width="180">
              <template v-slot="scope">
                <p>
                  <span>{{ scope.row.customerName }}</span>&nbsp;
                  <el-tag type="info" size="mini">V2</el-tag>&nbsp;
                  <el-tag type="info" size="mini">高消费</el-tag>
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="customerPhone" label="手机号" width="140">
              <template v-slot="scope">
                <span>18712341234</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderDetail" label="任务数" width="70">
              <template v-slot="scope">
                {{ scope.row.orderDetailList.length }}
              </template>
            </el-table-column>
            <el-table-column prop="customerServiceName" label="客服" width="180">
              <template v-slot="scope">
                {{ scope.row.customerServiceName + " / " + scope.row.orgName }}
              </template>
            </el-table-column>
            <el-table-column prop="orderType" label="订单类型" width="100">
              <template v-slot="scope">
                <el-tag type="info" v-if="scope.row.orderType===1">施工图</el-tag>
                <el-tag type="primary" v-if="scope.row.orderType===2">漫游图</el-tag>
                <el-tag type="success" v-if="scope.row.orderType===3">效果图</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="orderMoney" label="订单金额" width="200">
              <template v-slot="scope">
                <p>
                  <span style="margin-right: 5px">{{ scope.row.money }}元 </span>
                  <span v-if="scope.row.payment===0">
                    <span class="orderMoneyDot" style="background-color:#00b200;" />
                    <span class="orderMoneySum">已结清</span>
                  </span>
                  <span v-else-if="scope.row.payment!==0&&scope.row.paidMoney===0">
                    <span class="orderMoneyDot" style="background-color:gray;" />
                    <span class="orderMoneySum">尚未支付</span>
                  </span>
                  <span v-else>
                    <span class="orderMoneyDot" style="background-color:red;" />
                    <span class="orderMoneySum">已支付{{ scope.row.paidMoney }}元</span>
                  </span>
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="orderDate" label="创建时间" width="180" />
            <el-table-column fixed="right" label="操作" width="140">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false" @click="skipOrderDetail(scope.row.id,scope.row)">查看</el-link>
                &nbsp;&nbsp;&nbsp;
                <el-link :underline="false" @click="skipHandleOrderByUpdate(scope.row)">编辑</el-link>
                &nbsp;&nbsp;&nbsp;
                <el-link type="danger" :underline="false" @click="openDeleteMsgBox(scope.row.id,scope.row.orderTitle)">
                  删除
                </el-link>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin: 15px 0 40px 280px">
            <el-pagination background
                           layout="total,prev, pager, next,jumper"
                           :total="pageUtil.total"
                           :current-page="pageUtil.pageNum"
                           :page-sizes="[1,2,3,4,5]"
                           :page-size="pageUtil.pageSize"
                           @current-change="queryOrderInformation"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="高级筛选" :visible.sync="advancedSearchDialog">
      <div>
        <el-form :inline="true" :model="searchObj" class="form-inline" hide-required-asterisk>
          <el-form-item label="订单状态" class="form-inline-item">
            <el-select v-model="searchObj.status" placeholder="订单状态" :disabled="isSearchObjStatus">
              <el-option label="全部" :value="null" />
              <el-option label="下单" :value="1"></el-option>
              <el-option label="死单" :value="3"></el-option>
              <el-option label="完成" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单品质" class="form-inline-item">
            <el-select v-model="searchObj.orderQuality" placeholder="订单品质">
              <el-option label="全部" :value="null" />
              <el-option
                v-for="item in orderQuality"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="附件等级" class="form-inline-item">
            <el-select v-model="searchObj.attachmentType" placeholder="附件等级">
              <el-option label="全部" :value="null" />
              <el-option
                v-for="item in attachmentType"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="订单类型" class="form-inline-item">
            <el-select v-model="searchObj.orderType" placeholder="订单类型">
              <el-option label="全部" :value="null"></el-option>
              <el-option label="施工图" value="1"></el-option>
              <el-option label="漫游图" value="2"></el-option>
              <el-option label="效果图" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="对图时间" class="form-inline-item">
            <el-select v-model="searchObj.orderDate" placeholder="下单时间">
              <el-option label="全部" :value="null" />
              <el-option
                v-for="item in selectTimer"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="完成时间" class="form-inline-item">
            <el-select v-model="searchObj.finishDate" @change="finishDateSelect" placeholder="完成时间">
              <el-option label="全部" :value="null" />
              <el-option
                v-for="item in selectTimer"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="closeSearchDialog"> 取 消 </el-button>
          <el-button type="primary" @click="advancedSearch">确认搜索</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {mapState} from "vuex";
  import {queryOrderInfo, deleteOrderInfoById} from "@/api/orderInfo"
  import Cookies from "js-cookie";

  //获取时间函数
  function getTime(temp) {
    let now = new Date();
    if (temp) now.setTime(now.getTime() - temp * 3600 * 1000 * 24)
    let year = now.getFullYear();
    let month = now.getMonth();
    let day = now.getDate();
    month = month + 1;
    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;
    return year + "-" + month + "-" + day + " 00:00:00"
  }

  export default {
    name: 'OrderOpenSeaView',
    computed: {
      ...mapState({
        orderQuality: state => state.order.orderQuality,
        attachmentType: state => state.order.attachmentType,
        todayOrderManySum: state => state.order.todayOrderManySum,
        todayOrderMoneySum: state => state.order.todayOrderMoneySum,
        monthOrderMoneySum: state => state.order.monthOrderMoneySum,
        totalOrderMoneySum: state => state.order.totalOrderMoneySum,
        orderTotalCount: state => state.order.orderTotalCount,
        placeOrderStatusCount: state => state.order.placeOrderStatusCount,
        successOrderStatusCount: state => state.order.successOrderStatusCount,
        failOrderStatusCount: state => state.order.failOrderStatusCount,
        companyInfoList: state => state.order.companyInformation
      })
    },
    data() {
      return {
        linkTypePri: 'primary',
        tableStyle: "",
        orderTableLoading: true,
        quotationTableLoading: true,
        elLinkList: [
          {label: "全部", value: sessionStorage.getItem("SET_ORDER_TOTAL_COUNT"), isClick: true},
          {id: 1, label: "已下单", value: sessionStorage.getItem("SET_PLACE_ORDER_STATUS_COUNT"), isClick: false},
          {id: 3, label: "死单", value: sessionStorage.getItem("SET_FAIL_ORDER_STATUS_COUNT"), isClick: false},
          {id: 2, label: "已完成", value: sessionStorage.getItem("SET_SUCCESS_ORDER_STATUS_COUNT"), isClick: false}
        ],
        selectTimer: [
          {id: 1, label: '今天', value: getTime()},
          {id: 2, label: '近一周', value: getTime(7)},
          {id: 3, label: '近一个月', value: getTime(30)},
          {id: 4, label: '近六个月', value: getTime(180)},
          {id: 5, label: '近一年', value: getTime(365)}
        ],
        pageUtil: [],
        advancedSearchDialog: false,      //高级搜索对话框
        searchObj: {                      //查询条件
          status: "",
          orderQuality: "",
          attachmentType: "",
          orderType: "",
          orderDate: "",
          finishDate: "",
          orgId: "",
          orderTitle: ""
        },
        isSearchObjStatus: false,
        orderList: [],
        tempTableList: []
      }
    },
    methods: {
      skipHandleOrderByInsert() {
        this.$router.push({name: 'handleOrder', params: {isInsOrUpd: 'true'}})
      },
      skipHandleOrderByUpdate(orderInfo) {
        sessionStorage.setItem("handleOrder_orderInfo", JSON.stringify(orderInfo));
        this.$router.push({name: 'handleOrder', params: {isInsOrUpd: 'false', orderInfo: JSON.stringify(orderInfo)}})
      },
      openSearchDialog() {
        this.advancedSearchDialog = true;
      },
      closeSearchDialog() {
        this.advancedSearchDialog = false;
        this.searchObj.orderDate = "";
      },
      initialization() {
        this.$store.dispatch("order/queryOrderQuality");
        this.$store.dispatch("order/queryOrderAttachmentType");
        this.$store.dispatch("order/queryCompanyInfo");
        this.$store.dispatch("order/queryOrderDataObj");
      },
      queryOrderInformation(index) {
        queryOrderInfo({"orderInfo": this.searchObj, "index": index}).then(resp => {
          this.pageUtil = resp;
          this.orderList = resp.list;
          this.orderTableLoading = false;
          this.quotationTableLoading = false;
        })
      },
      elTabPaneSkip(tab) {
        if (tab.label === "报价表") {
          this.quotationTableLoading = true;
        } else if (tab.label === "公海订单") {
          this.orderTableLoading = true;
        }
        this.queryOrderInformation(1);
      },
      orderStatusQuery(item) {
        this.orderTableLoading = true;
        this.elLinkList.forEach(item => item.isClick = false);
        item.isClick = true;
        this.searchObj.status = item.id;
        this.queryOrderInformation(1);
        this.searchObj.status = null;
      },
      finishDateSelect() {
        if (this.searchObj.finishDate !== null) {
          this.searchObj.status = 2;
          this.isSearchObjStatus = true;
        } else {
          this.searchObj.status = "";
          this.isSearchObjStatus = false;
        }
      },
      advancedSearch() {
        this.elLinkList.forEach(item => item.isClick = false);
        this.advancedSearchDialog = false;
        this.queryOrderInformation(1);
      },
      openDeleteMsgBox(orderId, orderTitle) {
        this.$confirm(`是否确定删除该条标题名为 "${orderTitle}" 的订单记录?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteOrderInfoById(orderId)
          this.$message({type: 'success', message: '删除成功!'});
          window.location.reload();
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'});
        });
      },
      skipOrderDetail(orderId, orderInfo) {
        Cookies.set("orderDetail_OrderId", orderId)
        sessionStorage.setItem("handleOrder_orderInfo", JSON.stringify(orderInfo));
        this.$router.push({name: 'orderDetails', params: {orderId: orderId}})
      }
    },

    mounted() {
      this.initialization();
      this.queryOrderInformation(1);
    },

  }
</script>

<style scoped>
  .main {
    margin: 25px 0 0 15px;
  }

  .divMarBot {
    margin-bottom: 10px
  }

  #orderStatistics {
    height: 120px;
  }

  .info {
    display: inline-block;
    background-color: #FFFFFFEE;
    box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.1);
    width: 280px;
    height: 70px;
    margin: 10px 0 0 15px;
  }

  .margin {
    margin: 6px 0 0 15px;
  }

  .orderTitle {
    display: block;
    color: gray;
    font-size: 12px;
    margin-top: 10px;
  }

  .orderData {
    font-weight: bold;
    font-size: 26px;
    font-family: Arial Rounded MT, serif;
  }

  .up {
    color: #03c903;
    font-size: 10px;
    position: relative;
    top: -5px;
    right: -5px
  }

  .down {
    color: red;
    font-size: 10px;
    position: relative;
    top: -8px;
    right: -5px
  }

  ::v-deep .el-tabs__item.is-active {
    background-color: #fff;
  }

  ::v-deep .el-tabs__item {
    background-color: #f1f0f0;
    border-radius: 10px 10px 0 0;
  }

  ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-top: none;
    margin-top: 10px;
  }

  .orderState li {
    display: inline-block;
  }

  .el-divider__text, .el-image__error, .el-link, .el-timeline, .el-transfer__button i, .el-transfer__button span {
    font-size: 12px;
  }

  .orderState li:not(:first-child) {
    margin-left: 20px;
  }

  ::v-deep .el-table th.el-table__cell {
    background-color: #F9F9F9E8;
    font-weight: 500;
  }

  .form-inline-item {
    margin-left: 20px;
  }

  .orderMoneyDot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-left: 0.2rem;
    vertical-align: middle;
  }

  .orderMoneySum {
    font-size: 10px;
    color: #ABABABDC;
  }
</style>
